<template>
  <div id="app">
    <!-- 现在表格的状态（是否编辑） -->
    <h1>表格{{ statusText }}</h1>
    <!-- 表格 -->
    <table border v-table-click="state">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Score</th>
      </tr>
      <tr v-for="(item, index) in state.userList" :key="item.id">
        <td>{{ item.id }}</td>
        <td :data-index="index" data-field="name">
          <span>{{ item.name }}</span>
        </td>
        <td :data-index="index" data-field="age">
          <span>{{ item.age }}</span>
        </td>
        <td :data-index="index" data-field="score">
          <span>{{ item.score }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<!-- field：范围；领域 -->

<script setup>
import { reactive, computed } from 'vue';
import { io } from 'socket.io-client'
import vTableClick from '@/directives/TableClick'

// 连接后台服务
const socket = io('http://127.0.0.1:3000')

// 数据状态
const state = reactive({
  userList: [],   // 用户列表
  status: false,  // 默认不编辑
  field: '',    // 范围
  index: -1,     // 当前元素下标（哪一行）
  socket
})

// 注册服务端提交给客户端的函数
socket.on('loadData', (data) => {
  // console.log(data) // 可以拿到后台数据
  state.userList = data
})

socket.on('changeStatus', (status) => {
  state.status = status
})

socket.on('changeData', ({ field, index, value }) => {
  state.userList = state.userList.map((item, i) => {
    /**
     * 
     * item是一个对象（userList中的其中一项）
     * 
     * item[field]：比如传进来的field是age，那么就是item[age] = 输入的值
    */
    if (i == index) {
      item[field] = value
    }
    return item
  })
})

// 此刻是否编辑表格
const statusText = computed(() => state.status ? '正在修改中...' : '预览中')

</script>
<script>
export default {
  name: ''
}
</script>
<style scoped>
#app {}

table {
  margin: 0 auto;
}

table th {
  margin-bottom: 10px;
  background-color: #fb7070;
}

table tr td {
  padding: 20px 30px;
  position: relative;
  text-align: center;
}

h1 {
  text-align: center;
}
</style>
